<!--  -->
<template>
  <div class='authority'>
    <el-button v-permissions="'deviceGateway:add'" type="primary" @click="addgateWay" style="margin-bottom: 10px;">新增</el-button>
    <!-- <el-button type="primary" @click="testButton" style="margin-bottom: 10px;">测试按钮</el-button> -->
    <!-- 查询 -->
    <el-form :inline="true" :model="formInGoleWay" class="demo-form-inline">
      <el-form-item label="网关名称">
        <el-input v-model="formInGoleWay.kw" placeholder="请输入网关名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInGoleWay.status" placeholder="请选择">
          <el-option
            v-for="(item,index) in formInGoleWay.statusArr"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="牧场名称">
        <el-select
          v-model="formInGoleWay.ranchId"
          placeholder="请选择"
          @change="changeForQueryRan">
          <el-option
            v-for="(item,index) in formInGoleWay.ranchForQueryArr"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="圈棚名称">
        <el-select
          v-model="formInGoleWay.penId"
          placeholder="请选择"
          @change="changeMypenChildFun">
          <el-option
            v-for="(item,index) in formInGoleWay.penForQueryArr"
            :key="index"
            :label="item.penName"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏舍名称">
        <el-select
          v-model="formInGoleWay.styId"
          placeholder="请选择"
          >
          <el-option
            v-for="(item,index) in formInGoleWay.styForQueryArr"
            :key="index"
            :label="item.styName"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSrearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        :data="getMyGoleWayList"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="网关名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="ranchName"
          label="牧场名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="penName"
          label="圈棚名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="styName"
          label="栏舍名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="imeiNum"
          label="imei"
          width="100">
        </el-table-column>
        <el-table-column
          prop="iotNum"
          label="物联网卡号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="snNum"
          label="sn号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.status === 0 ? '停用' : '启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          >
          <template slot-scope="scope">
            <el-button v-permissions="'deviceGateway:detail'" @click="getGoleWayDetail(scope.row.id)" type="text" size="small">详情</el-button>
            <!-- <el-button @click="setRoleDetail(scope.row.id,scope.row.roleName)" type="text" size="small">修改</el-button> -->
            <el-button v-permissions="'deviceGateway:delete'" @click="deletRoleUser(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 新增 -->
      <el-dialog
        title="新增网关"
        :visible.sync="addGloeWayData"
        @close="closeDia"
        width="50%">
        <el-form ref="formName" :model="formAddGoleWay" :rules="addGoleWayRule" label-width="80px">
          <el-form-item label="状态" prop="status">
            <el-select v-model="formAddGoleWay.status" placeholder="请选择">
              <el-option
                v-for="(item,index) in formAddGoleWay.statusArr"
                :key="index"
                :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网关名称" prop="name">
            <el-input v-model="formAddGoleWay.name"></el-input>
          </el-form-item>
          <el-form-item label="imei" prop="imei">
            <el-input v-model="formAddGoleWay.imei"></el-input>
          </el-form-item>
          <el-form-item label="物联网卡号" prop="iot">
            <el-input v-model="formAddGoleWay.iot"></el-input>
          </el-form-item>
          <el-form-item label="sn号" prop="sn">
            <el-input v-model="formAddGoleWay.sn"></el-input>
          </el-form-item>
          <el-form-item label="牧场名称" prop="ranchId">
            <el-select v-model="formAddGoleWay.ranchId" placeholder="请选择" @change="changeRanchList">
              <el-option
                v-for="(item,index) in formAddGoleWay.ranchArrForAdd"
                :key="index"
                :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="圈棚名称" prop="penId">
            <el-select
              v-model="formAddGoleWay.penId"
              placeholder="请选择"
              @change="changePenChild">
              <el-option
                v-for="(item,index) in formAddGoleWay.penIdArr"
                :key="index"
                :label="item.penName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="栏舍名称" prop="styId">
            <el-select v-model="formAddGoleWay.styId" placeholder="请选择">
              <el-option
                v-for="(item,index) in formAddGoleWay.styIdArr"
                :key="index"
                :label="item.styName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: center;">
          <el-button type="primary" @click="addMyGoleWay">保存</el-button>
        </div>
      </el-dialog>

      <!-- 网关详情 -->
      <el-dialog
        title="网关详情"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        width="50%">
        <el-form
          ref="GaleWayDetailsRes"
          :model="updataGateWayDetail"
          :disabled="isDisabled"
          :inline="false"
          class="demo-form-inline"
          label-position="left"
          :rules="ranchDetailsFrom"
          label-width="auto">
          <div class="filter-container">
            <el-form-item label="网关名称" prop="name">
              <el-input v-model="updataGateWayDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="imei" prop="imeiNum">
              <el-input v-model="updataGateWayDetail.imeiNum"></el-input>
            </el-form-item>
            <el-form-item label="物联网卡号" prop="iotNum">
              <el-input v-model="updataGateWayDetail.iotNum"></el-input>
            </el-form-item>
            <el-form-item label="sn号" prop="num">
              <el-input v-model="updataGateWayDetail.num"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status" v-if="isDisabled">
              <span>{{ updataGateWayDetail.status === 0 ? '停用' : '启用'}}</span>
            </el-form-item>
            <el-form-item label="状态" prop="status" v-if="!isDisabled">
              <el-select v-model="updataGateWayDetail.status" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updataGateWayDetail.statusArr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="牧场名称" prop="ranchId" v-if="isDisabled">
              <el-input v-model="updataGateWayDetail.ranchName"></el-input>
            </el-form-item>
            <el-form-item label="牧场名称" prop="ranchId" v-if="!isDisabled">
              <el-select
                v-model="updataGateWayDetail.ranchId"
                placeholder="请选择"
                @change="changeForDetailRanchList">
                <el-option
                  v-for="(item,index) in updataGateWayDetail.ranchArr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="圈棚名称" prop="ranchId" v-if="isDisabled">
              <el-input v-model="updataGateWayDetail.penName"></el-input>
            </el-form-item>
            <el-form-item label="圈棚名称" prop="penId" v-if="!isDisabled">
              <el-select
                v-model="updataGateWayDetail.penId"
                placeholder="请选择"
                @change="changForDetailsPenList">
                <el-option
                  v-for="(item,index) in updataGateWayDetail.penIdArr"
                  :key="index"
                  :label="item.penName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="栏舍名称" prop="ranchId" v-if="isDisabled">
              <el-input v-model="updataGateWayDetail.styName"></el-input>
            </el-form-item>
            <el-form-item label="栏舍名称" prop="styId" v-if="!isDisabled">
              <el-select v-model="updataGateWayDetail.styId" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updataGateWayDetail.styIdArr"
                  :key="index"
                  :label="item.styName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="buttons">
           <el-button type="primary" v-permissions="'deviceGateway:update'" @click="setConfigGateWay" v-if="isDisabled">修改</el-button>
           <el-button type="primary" @click="submitConfigGoleWay" v-if="!isDisabled">保存</el-button>
           <el-button @click="closeDiaDetail">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <pagination
      class="pagination_container"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      :page.sync="pagination.page"
      :limit.sync="pagination.pageSize"
      @pagination="getGoleWayListInit"
    />
  </div>
</template>

<script>
import { ranchRanchList } from '@/api/ranch'
import { penPenList } from '@/api/pen'
import { styStyList } from '@/api/sty'
import { deviceGatewayAdd, deviceGatewayList, deviceGatewayDetail, deviceGatewayUpdate } from '@/api/deviceGateway'

import Pagination from '@/components/pagination'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Pagination
  },
  data () {
    // 这里存放数据
    return {
      isDisabled: true,
      // 查询
      formInGoleWay: {
        kw: '',
        penId: '',
        penForQueryArr: [],
        ranchId: '',
        ranchForQueryArr: [],
        status: '',
        styId: '',
        styForQueryArr: [],
        statusArr: [
          {
            name: '停用',
            id: 0
          },
          {
            name: '启用',
            id: 1
          }
        ]
      },
      formAddGoleWay: { // 新增网关
        name: '',
        imei: '',
        iot: '',
        penId: '',
        penIdArr: [],
        ranchId: '',
        ranchArrForAdd: [],
        sn: '',
        status: '', // 0 停用 1 启用
        styId: '',
        styIdArr: [],
        statusArr: [
          {
            name: '停用',
            id: 0
          },
          {
            name: '启用',
            id: 1
          }
        ]
      },
      // 新增 rule 验证
      addGoleWayRule: {
        name: [
          { required: true, trigger: 'blur', message: '请输入您的名字' }
        ],
        imei: [
          { required: true, trigger: 'blur', message: '请输入设备号' }
        ],
        iot: [
          { required: true, trigger: 'blur', message: '请输入物联网卡号' }
        ],
        sn: [
          { required: true, trigger: 'blur', message: '请输入sn号' }
        ],
        ranchId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        penId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        styId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ],
        status: [
          { required: true, trigger: 'change', message: '请选择状态' }
        ]
      },
      updataGateWayDetail: { // 修改网关详情
        name: '',
        imeiNum: '',
        iotNum: '',
        penId: '',
        penIdArr: [],
        ranchId: '',
        ranchArr: [],
        num: '',
        status: '', // 0 停用 1 启用
        styId: '',
        styIdArr: [],
        statusArr: [
          {
            name: '停用',
            id: 0
          },
          {
            name: '启用',
            id: 1
          }
        ]
      },
      getMyGoleWayList: [], // 牧场列表
      // 修改详情 rule 验证
      ranchDetailsFrom: {
        name: [
          { required: true, trigger: 'blur', message: '请输入您的名字' }
        ],
        imeiNum: [
          { required: true, trigger: 'blur', message: '请输入设备号' }
        ],
        iotNum: [
          { required: true, trigger: 'blur', message: '请输入物联网卡号' }
        ],
        num: [
          { required: true, trigger: 'blur', message: '请输入sn号' }
        ],
        ranchId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        penId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        styId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ],
        status: [
          { required: true, trigger: 'change', message: '请选择状态' }
        ]
      },
      goleWayDataId: '',
      // 分页
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      updatedRanchArr: [],
      dialogVisible: false,
      addGloeWayData: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getGoleWayListInit()
    this.getMyRanchListFun()
  },
  // 方法集合
  methods: {
    testButton () {
      this.$router.push({ path: 'deviceList' })
    },
    // 查询 - 牧场
    getMyRanchListFun () {
      ranchRanchList().then(res => {
        if (res.code === '200') {
          this.formInGoleWay.ranchForQueryArr = res.data // 查询 牧场 arr
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 查询 - 圈棚
    changeForQueryRan (val) {
      this.formInGoleWay.penId = ''
      this.formInGoleWay.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.formInGoleWay.penForQueryArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 查询 - 栏舍
    changeMypenChildFun (val) {
      this.formInGoleWay.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.formInGoleWay.styForQueryArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 获取牧场列表
    getRanchListForAdd () {
      ranchRanchList().then(res => {
        if (res.code === '200') {
          this.formAddGoleWay.ranchArrForAdd = res.data // 新增 牧场 arr
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // funciton for ranchList
    getRanchListForAddResult () {
      ranchRanchList().then(res => {
        if (res.code === '200') {
          this.updatedRanchArr = res.data // 新增 牧场 arr
          this.getPenListForResult()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // function for penList have id
    getPenListForResult () {
      penPenList(this.updataGateWayDetail.ranchId).then(res => {
        if (res.code === '200') {
          this.updataGateWayDetail.penIdArr = res.data
          this.getStyListForResult()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // function for styList have id
    getStyListForResult () {
      styStyList(this.updataGateWayDetail.penId).then(res => {
        if (res.code === '200') {
          this.updataGateWayDetail.styIdArr = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    changeForDetailRanchList (val) {
      this.updataGateWayDetail.penId = ''
      this.updataGateWayDetail.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.updataGateWayDetail.penIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    changForDetailsPenList (val) {
      this.updataGateWayDetail.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.$forceUpdate()
          this.updataGateWayDetail.styIdArr = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 切换 牧场 - 获取圈棚 - 新增
    changeRanchList (val) {
      this.formAddGoleWay.penId = ''
      this.formAddGoleWay.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.formAddGoleWay.penIdArr = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 切换圈棚 获取栏舍 - 新增
    changePenChild (val) {
      this.formAddGoleWay.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.formAddGoleWay.styIdArr = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 获取网关列表
    getGoleWayListInit () {
      deviceGatewayList({
        status: this.formInGoleWay.status,
        ranchId: this.formInGoleWay.ranchId,
        penId: this.formInGoleWay.penId,
        styId: this.formInGoleWay.styId,
        kw: this.formInGoleWay.kw,
        limit: this.pagination.pageSize,
        page: this.pagination.page
      }).then(res => {
        if (res.code === '200') {
          this.getMyGoleWayList = res.data.records
          if (res.data.total > 0 && Math.ceil(res.data.total / this.pagination.size) < this.pagination.page) {
            this.pagination.page = Math.ceil(res.data.total / this.pagination.size)
            this.getGoleWayListInit()
          } else {
            this.pagination.total = res.data.total
          }
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 打开新增弹框
    addgateWay () {
      this.addGloeWayData = true
      this.getRanchListForAdd()
    },
    // 新增保存
    addMyGoleWay () {
      this.$refs.formName.validate((valid) => {
        if (valid) {
          const goleWayObj = {
            imei: this.formAddGoleWay.imei,
            iot: this.formAddGoleWay.iot,
            name: this.formAddGoleWay.name,
            penId: this.formAddGoleWay.penId,
            ranchId: this.formAddGoleWay.ranchId,
            sn: this.formAddGoleWay.sn,
            status: this.formAddGoleWay.status,
            styId: this.formAddGoleWay.styId
          }
          deviceGatewayAdd(goleWayObj).then(res => {
            this.addGloeWayData = false
            if (res.code === '200') {
              this.getGoleWayListInit()
              this.formAddGoleWay = {
                name: '',
                imei: '',
                iot: '',
                penId: '',
                penIdArr: [],
                ranchId: '',
                ranchArrForAdd: [],
                sn: '',
                status: '', // 0 停用 1 启用
                styId: '',
                styIdArr: [],
                statusArr: [
                  {
                    name: '停用',
                    id: 0
                  },
                  {
                    name: '启用',
                    id: 1
                  }
                ]
              }
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 查询
    submitSrearch () {
      this.getGoleWayListInit()
    },
    // 重置
    resetForm () {
      this.formInGoleWay.kw = ''
      this.formInGoleWay.penId = ''
      this.formInGoleWay.ranchId = ''
      this.formInGoleWay.status = ''
      this.formInGoleWay.styId = ''
      this.formInGoleWay.penForQueryArr = []
      this.formInGoleWay.styForQueryArr = []
    },
    // 删除用户
    deletRoleUser (val) {
      // this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //     center: true
      //   }).then(() => {
      //     companyDelete(val).then(res => {
      //       if (res.code === '200') {
      //         this.$message({
      //           message: '删除成功',
      //           type: 'success'
      //         })
      //         this.getGoleWayListInit()
      //       } else {
      //         this.$message({
      //           type: 'info',
      //           message: res,message
      //         });
      //       }
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     });
      //   });
    },
    // 用户详情
    getGoleWayDetail (val) {
      this.goleWayDataId = val
      deviceGatewayDetail(val).then(res => {
        this.updataGateWayDetail = res.data
        this.dialogVisible = true
      })
    },
    // 修改用户详情
    async setConfigGateWay () {
      await this.getRanchListForAddResult()
      this.$confirm('是否确认修改网关信息', '提示', {
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        this.isDisabled = false
        this.updataGateWayDetail.statusArr = [
          {
            name: '停用',
            id: 0
          },
          {
            name: '启用',
            id: 1
          }
        ]
        this.updataGateWayDetail.ranchArr = this.updatedRanchArr
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    },
    // 保存修改后用户信息
    submitConfigGoleWay () {
      this.$refs.GaleWayDetailsRes.validate((valid) => {
        if (valid) {
          const goleWay = {
            gatewayId: this.goleWayDataId,
            imei: this.updataGateWayDetail.imeiNum,
            iot: this.updataGateWayDetail.iotNum,
            name: this.updataGateWayDetail.name,
            penId: this.updataGateWayDetail.penId,
            ranchId: this.updataGateWayDetail.ranchId,
            sn: this.updataGateWayDetail.num,
            status: this.updataGateWayDetail.status,
            styId: this.updataGateWayDetail.styId
          }
          deviceGatewayUpdate(goleWay).then(res => {
            if (res.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.isDisabled = true
              this.getGoleWayListInit()
            } else {
              this.$message({
                type: 'info',
                message: res.message
              })
            }
          })
        }
      })
    },
    // 关闭新增弹框
    closeDia () {
      // this.formAddGoleWay = {}
    },
    // 关闭详情弹框
    closeDiaDetail () {
      this.dialogVisible = false
      this.isDisabled = true
    }
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.authority {
  width: 100%;
  height: 100%;
}
.fir {
  width: auto;
  height: 30px;
  line-height: 30px;
  span {
    margin-left: 10px;
    padding: 5px;
    width: 30%;
  }
}
.sen {
  margin: 5px auto;
  width: 80%;
  padding: 10px;
  border: 1px solid #f0f0f0;
}
.buttons {
  width: 100%;
  text-align: center;
}
</style>
